<template>
	<view class="container">
		<view class="search">
			<van-search shape="round" placeholder="请输入搜索关键词" />
		</view>
		<view class="container-body">
			<view class="container-left">
				<view style="height: 500rpx;">
					<view :class="{'avtive':item.id===navDefualtActive}" @tap="getCategory(item.id)" class="nav-item"
						v-for="item in navData" :key="item.id">
						{{item.short_title}}
					</view>
				</view>
			</view>
			<view class="container-right" style="height: 100%;">
				<scroll-view scroll-y="true">
					<view>
						<categroyItem :categoryItem='categoryItem'></categroyItem>
					</view>
				</scroll-view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		nextTick,
		onMounted,
		ref
	} from "vue"

	// 左侧栏数据
	const navData = ref([])
	// 左侧栏高亮默认值
	const navDefualtActive = ref(1)

	// 分类对应的数据
	const categoryItem = ref()

	// 分类请求函数 传入请求的分类id
	const getCategory = (id) => {
		navDefualtActive.value = id
		uni.showLoading({
			title: '加载中...'
		});
		uni.request({
			url: `https://api.shanghaicang.com.cn/api/v1/getBrandActivities?category_id=${id}`,
			success(res) {
				categoryItem.value = res.data.data.activities
				uni.hideLoading();
			}
		})
	}

	// 
	onMounted(() => {
					uni.showLoading({
						title: '加载中...'
					});
		uni.request({
			url: "https://api.shanghaicang.com.cn/api/v1/getBrandActivityCategoriesv2",
			success(res) {
				navData.value = res.data.data.cates
				navDefualtActive.value = res.data.data.cates[0].id
			},
			complete() {
				uni.hideLoading();
			}
		})

		// TODO
		// nextTick(()=>{
		getCategory(navDefualtActive.value)
		// })
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		display: flex;
		flex-direction: column;

		.search {
			display: block;
			width: 100%;
			height: 110rpx;
			z-index: 10;
			position: fixed;
			background-color: #fff;
		}

		.container-body {
			margin-top: 110rpx;
			flex: 1;
			display: flex;
			position: relative;
			flex-direction: row;

			.container-left {
				width: 170rpx;
				position: fixed;
				top: 110rpx;
				left: 0;
				height: 100%;
				background-color: #efefef;

				.nav-item {
					box-sizing: content-box;
					height: 110rpx;
					width: 100%;
					display: flex;
					font-size: 20rpx;
					border-left: 2px solid transparent;
					justify-content: center;
					align-items: center;
				}

				.avtive {
					font-weight: bold;
					box-sizing: border-box;
					border-radius: 2rpx;
					border-left: 2px solid brown;
					background-color: #fff;
				}
			}

			.container-right {
				flex: 1;
				overflow-y: auto;
				margin-left: 170rpx;
				background-color: #f5f4f4;
			}
		}
	}
</style>
